<template>
  <div>
    <TopNav title="栏目管理" />
    <div class="activList">
      <h4>点击删除以下频道</h4>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in activeList"
          :key="item.id"
          @click="deactive(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="deactiveList">
      <h4>点击添加以下频道</h4>
      <div class="list">
        <div
          class="item"
          v-for="(item, index) in deactiveList"
          :key="item.id"
          @click="active(index)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../components/TopNav";
export default {
  data() {
    return {
      activeList: [],
      deactiveList: [],
    };
  },
  components: {
    TopNav,
  },
  watch: {
    activeList() {
      localStorage.setItem("activeList", JSON.stringify(this.activeList));
    },
    deactiveList() {
      localStorage.setItem("deactiveList", JSON.stringify(this.deactiveList));
    },
  },
  created() {
    if (localStorage.getItem("activeList")) {
      this.activeList = JSON.parse(localStorage.getItem("activeList"));
      if (localStorage.getItem("deactiveList")) {
        this.deactiveList = JSON.parse(localStorage.getItem("deactiveList"));
      }
    } else {
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data);
        this.activeList = res.data.data;
      });
    }
  },
  methods: {
    deactive(index) {
      // 把激活列表里的选中的栏目添加到未激活里
      this.deactiveList.push(this.activeList[index]);
      //   把选中的在激活列表里删除
      this.activeList.splice(index, 1);
    },
    // 同上同理
    active(index) {
      this.activeList.push(this.deactiveList[index]);
      this.deactiveList.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.activList {
  padding: 0 16/360 * 100vw;
  h4 {
    font-size: 12/360 * 100vw;
    color: #888;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 16/360 * 100vw 0;
    .item {
      font-size: 16/360 * 100vw;
      padding: 8/360 * 100vw 14/360 * 100vw;
      border: 1px solid #ccc;
      margin-right: 18/360 * 100vw;
      margin-bottom: 10/360 * 100vw;
    }
  }
}
.deactiveList {
  padding: 0 16/360 * 100vw;
  h4 {
    font-size: 12/360 * 100vw;
    color: #888;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 16/360 * 100vw 0;
    .item {
      font-size: 16/360 * 100vw;
      padding: 8/360 * 100vw 14/360 * 100vw;
      border: 1px solid #ccc;
      margin-right: 18/360 * 100vw;
      margin-bottom: 10/360 * 100vw;
    }
  }
}
</style>